
<template>
  <div class="mulbox">
    <van-cell-group>
      <van-popup
        v-model="visible"
        position="bottom"
        :style="{ height: '50%' }"
        @click-overlay="cancel"
        :close-on-click-overlay="false"
      >
        <div style="
            position: sticky;
            top: 0;
            background-color: #fff;
            width: 100%;
            z-index: 1;
          ">
          <div class="btn">
            <div
              @click="cancel"
              class="cancle"
            >取消</div>
            <div
              @click="confirm"
              class="confirm"
            >确定</div>
          </div>
        </div>
        <van-checkbox-group v-model="result">
          <van-cell-group>
            <van-cell
              v-for="(item, index) in dataList"
              clickable
              :key="index"
              :title="item.name"
              @click="toggle(index)"
            >
              <template #right-icon>
                <van-checkbox
                  :name="item"
                  ref="checkboxes"
                />
              </template>
            </van-cell>
          </van-cell-group>
        </van-checkbox-group>
      </van-popup>
    </van-cell-group>
  </div>
</template>

<script>
export default {
  name: "MultipleSelect",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    value: {
      type: String,
      default: null,
    },
    list: {
      type: Array,
      default: null,
    },
  },
  data() {
    return {
      dataList: this.list,
      list2: [],
      result: [],
      userNames: this.value,
    };
  },
  created() {
    this.list2 = this.$parent.empList;
    //模拟有默认选中
    this.result = this.$parent.empList.filter((item) => {
      const userNames = this.userNames.split(",");
      return userNames.includes(item.name);
    });
  },

  methods: {
    toggle(index) {
      this.$refs.checkboxes[index].toggle();
    },
    //取消按钮
    cancel() {
      this.$emit("close");
    },
    //确定按钮
    confirm() {
      console.log(this.result);
      this.$emit("multipleSubmit", this.result);
      this.cancel();
    },
  },
};
</script>

<style lang="less" scoped>
.mulbox {
  background: #fff;
}
select-checkbox {
  position: absolute;
  right: 0;
}

.select-popup-footer {
  margin-top: 10px;
  padding: 10px;
  display: flex;
  justify-content: space-between;
}

.btn {
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  padding: 20px;
}

.cancle {
  font-size: 14px;
  color: #969799;
}

.confirm {
  font-size: 14px;
  color: #576b95;
}
/deep/.van-hairline--top-bottom::after {
  border: none;
}
</style>


